<html lang="en">
  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="HTML5 Admin is an HTML5 Administration template easy to modify and maintain based on Bootstrap 3">
    <meta name="author" content="HTML5 Admin">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="images/favicon.png">
    <title>HTML5 Admin</title>
    <link rel="stylesheet" href="/dashboard/bootstrap.css">
    <link rel="stylesheet" href="/dashboard/font-awesome.css">
    <link rel="stylesheet" href="/dashboard/bootstrap-overrides.css">
    <link rel="stylesheet" href="/dashboard/HTML5admin.css">
    <link rel="stylesheet" href="/dashboard/jquery.dataTables.css">
    <link rel="stylesheet" href="/dashboard/datatables-overrides.css">
    <link rel="stylesheet" href="/dashboard/animate.css">
    <!--[if lt IE 9]>
      <script src="js/utils/html5shiv.js?ver=1.1"></script>
      <script src="js/utils/respond.min.js?ver=1.1"></script>
    <![endif]-->
    <style type="text/css">.jqstooltip { height:35px;width:50px;position: absolute;left: 0px;top: 0px;visibility: hidden;background: rgb(0, 0, 0) transparent;background-color: rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";color: white;font: 10px arial, san serif;text-align: left;white-space: nowrap;padding: 5px;border: 1px solid white;z-index: 10000;}.jqsfield { color: white;font: 10px arial, san serif;text-align: left;}</style>
    <style type="text/css">.fp__btn{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;height:34px;padding:4px 20px 5px 40px;margin-bottom:0;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:"Open Sans", sans-serif;font-size:12px;font-weight:600;line-height:1.42857143;color:#fff;text-align:center;white-space:nowrap;background:#3ac7ed;background-image:url("");background-repeat:no-repeat;background-position:17px 9px;border:1px solid transparent;border-radius:17px}.fp__btn:hover{background-color:#12a2c8}.fp__btn:active,.fp__btn:focus{outline:none}@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){.fp__btn{background-image:url("");background-size:13px 13px}}</style></head>
  
  <body data-offset="250" data-target=".h5a-sidebar" data-spy="scroll" style="background-color: #F7F6F2;">
    <div class="h5a-header" id="content">
      <div class="container h5a-container" style="padding-top: 2px;">
        <div class="row">
          <div class="col-sm-3" style="width: 30%;height:200px">
            <div class="box" style="height:250px">
              <div class="icon blue">
                <i class="fa fa-user"></i>
              </div>
              <div class="" style="padding-top: 70px;margin-left: 0px;text-align:center;">
                <div class=""><font size="5">设备总数: <%= @count%></font></div>
                <div class=""><font size="5">在线数:<%= @online%></font></div>
              </div>
            </div>
          </div>
          <div class="col-sm-3" style="width: 30%;">
            <div class="box" style="height:250px">
              <div class="minichart green">
                <span class="inlinebar">
                  <canvas id="device_id" width="65" height="50" style="display: inline-block; vertical-align: top; width: 65px; height: 50px;"></canvas>
                </span>
              </div>
              <div class="" style="padding-top: 70px;margin-left: 0px;text-align:center;">
                <div class=""><font size="5">物联卡:<%= @count%></font></div>
                <div class=""><font size="5"><a href="#sampleModal" data-toggle="modal">查看 »</a></font></div>
              </div>
            </div>
          </div>

          <div class="col-sm-3" style="width: 30%;">
            <div class="box" style="height:250px;font-size:20px;">
              <div class="minichart orange">
                <span class="inlinebar">
                  <canvas width="65" height="50" style="display: inline-block; vertical-align: top; width: 65px; height: 50px;"></canvas>
                </span>
              </div>
              <div class="" style="padding-top: 70px;margin-left: 0px;text-align:center;">
                <div class=""><font size="5">满溢次数:122</font></div>
              </div>
            </div>
          </div>

          <div class="col-sm-3" style="width: 30%;">
            <div class="box" style="height:250px">
              <div class="icon blue">
                <i class="fa fa-globe"></i>
              </div>
              <div class="" style="padding-top: 70px;margin-left: 0px;text-align:center;">
                <div class=""><font size="5">今天流量: 12M</font></div>
                <div class=""><font size="5">历史流量:182M</font></div>
              </div>
            </div>
          </div>
          <div class="col-sm-3" style="width: 30%;">
            <div class="box" style="height:250px">
              <div class="icon red">
                <i class="fa fa-exclamation-triangle"></i>
              </div>
              <div class="" style="padding-top: 70px;margin-left: 0px;text-align:center;">
                <div class=""><font size="5">告警数: 89</font></div>
                <div class=""><font size="5">发送短信数:100</font></div>
              </div>
            </div>
          </div>
          <div class="col-sm-3" style="width: 30%;">
            <div class="box" style="height:250px;font-size:20px;">
              <div class="minichart orange" style="background: #1B9C90;">
                <span class="inlinebar">
                  <canvas width="65" height="50" style="display: inline-block; vertical-align: top; width: 65px; height: 50px;"></canvas>
                </span>
              </div>
              <div class="" style="padding-top: 70px;margin-left: 0px;text-align:center;">
                <div class=""><font size="5">开门次数:1222</font></div>
              </div>
            </div>
          </div>

          <div class="col-sm-3" style="width: 30%;display:none">
            <div class="box" style="height:150px">
              <div id="examplePie" style="width: 100%; height: 70px; padding: 0px; position: relative;">
                <canvas class="flot-base" width="287" height="70" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 287px; height: 70px;"></canvas>
                <canvas class="flot-overlay" width="287" height="70" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 287px; height: 70px;"></canvas>
                <div class="legend">
                  <div style="position: absolute; width: 100px; height: 111px; top: 5px; right: 5px; opacity: 0.85; background-color: rgb(255, 255, 255);"></div>
                  <table style="position:absolute;top:5px;right:5px;;font-size:smaller;color:#545454">
                    <tbody>
                      <tr>
                        <td class="legendColorBox">
                          <div style="border:1px solid #ccc;padding:1px">
                            <div style="width:4px;height:0;border:5px solid rgb(237,194,64);overflow:hidden"></div>
                          </div>
                        </td>
                        <td class="legendLabel">Serie #1</td></tr>
                      <tr>
                        <td class="legendColorBox">
                          <div style="border:1px solid #ccc;padding:1px">
                            <div style="width:4px;height:0;border:5px solid rgb(175,216,248);overflow:hidden"></div>
                          </div>
                        </td>
                        <td class="legendLabel">Serie #2</td></tr>
                      <tr>
                        <td class="legendColorBox">
                          <div style="border:1px solid #ccc;padding:1px">
                            <div style="width:4px;height:0;border:5px solid rgb(203,75,75);overflow:hidden"></div>
                          </div>
                        </td>
                        <td class="legendLabel">Serie #3</td></tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-3" style="width: 30%;display:none">
            <div class="box" style="height:150px">
              <div id="exampleStacking" style="width: 100%; height: 70px; padding: 0px; position: relative;">
                <canvas class="flot-base" width="287" height="70" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 287px; height: 70px;"></canvas>
                <canvas class="flot-overlay" width="287" height="70" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 287px; height: 70px;"></canvas>
                <div class="legend">
                  <div style="position: absolute; width: 74px; height: 111px; top: 5px; right: 5px; opacity: 0.85; background-color: rgb(255, 255, 255);"></div>
                  <table style="position:absolute;top:5px;right:5px;;font-size:smaller;color:rgb(255, 255, 255, 1)">
                    <tbody>
                      <tr>
                        <td class="legendColorBox">
                          <div style="border:1px solid #ccc;padding:1px">
                            <div style="width:4px;height:0;border:5px solid rgb(184,214,230);overflow:hidden"></div>
                          </div>
                        </td>
                        <td class="legendLabel">foo</td></tr>
                      <tr>
                        <td class="legendColorBox">
                          <div style="border:1px solid #ccc;padding:1px">
                            <div style="width:4px;height:0;border:5px solid rgb(233,233,233);overflow:hidden"></div>
                          </div>
                        </td>
                        <td class="legendLabel">baz</td></tr>
                      <tr>
                        <td class="legendColorBox">
                          <div style="border:1px solid #ccc;padding:1px">
                            <div style="width:4px;height:0;border:5px solid rgb(197,224,238);overflow:hidden"></div>
                          </div>
                        </td>
                        <td class="legendLabel">bar</td></tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container" style="display:none">
      <div class="row">
        <div class="col-md-3">
          <div class="h5a-sidebar dashboard hidden-print affix-top">
          </div>
        </div>
        <div class="col-md-9" role="main">
          <div class="h5a-docs-section">
            <div class="page-header">
              <h1 id="big-graph">Big Graph Example</h1></div>
            <div class="row">
              <div class="col-sm-12">
                <div class="btn-group pull-right" data-toggle="buttons">
                  <label class="h5a-btn btn btn-default">
                    <input type="radio">Today</label>
                  <label class="h5a-btn btn btn-default active">
                    <input type="radio">Yesterday</label>
                  <label class="h5a-btn btn btn-default">
                    <input type="radio">Last 30 days</label></div>
              </div>
            </div>
            <div id="exampleChart" style="width: 100%; height: 300px; padding: 0px; position: relative;">
              <canvas class="flot-base" width="982" height="300" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 982px; height: 300px;"></canvas>
              <div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);">
                <div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
                  <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 109px; top: 281px; left: 20px; text-align: center;">1.0</div>
                  <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 109px; top: 281px; left: 138px; text-align: center;">1.5</div>
                  <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 109px; top: 281px; left: 256px; text-align: center;">2.0</div>
                  <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 109px; top: 281px; left: 374px; text-align: center;">2.5</div>
                  <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 109px; top: 281px; left: 492px; text-align: center;">3.0</div>
                  <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 109px; top: 281px; left: 610px; text-align: center;">3.5</div>
                  <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 109px; top: 281px; left: 728px; text-align: center;">4.0</div>
                  <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 109px; top: 281px; left: 846px; text-align: center;">4.5</div>
                  <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 109px; top: 281px; left: 965px; text-align: center;">5.0</div></div>
                <div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
                  <div class="flot-tick-label tickLabel" style="position: absolute; top: 268px; left: 2px; text-align: right;">100</div>
                  <div class="flot-tick-label tickLabel" style="position: absolute; top: 214px; left: 2px; text-align: right;">200</div>
                  <div class="flot-tick-label tickLabel" style="position: absolute; top: 161px; left: 2px; text-align: right;">300</div>
                  <div class="flot-tick-label tickLabel" style="position: absolute; top: 107px; left: 2px; text-align: right;">400</div>
                  <div class="flot-tick-label tickLabel" style="position: absolute; top: 54px; left: 2px; text-align: right;">500</div>
                  <div class="flot-tick-label tickLabel" style="position: absolute; top: 1px; left: 2px; text-align: right;">600</div></div>
              </div>
              <canvas class="flot-overlay" width="982" height="300" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 982px; height: 300px;"></canvas>
              <div class="legend">
                <div style="position: absolute; width: 74px; height: 74px; top: 14px; right: 14px; opacity: 0.85; background-color: rgb(255, 255, 255);"></div>
                <table style="position:absolute;top:14px;right:14px;;font-size:smaller;color:rgb(210, 210, 210)">
                  <tbody>
                    <tr>
                      <td class="legendColorBox">
                        <div style="border:1px solid #ccc;padding:1px">
                          <div style="width:4px;height:0;border:5px solid rgb(184,214,230);overflow:hidden"></div>
                        </div>
                      </td>
                      <td class="legendLabel">foo</td></tr>
                    <tr>
                      <td class="legendColorBox">
                        <div style="border:1px solid #ccc;padding:1px">
                          <div style="width:4px;height:0;border:5px solid rgb(233,233,233);overflow:hidden"></div>
                        </div>
                      </td>
                      <td class="legendLabel">baz</td></tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="row scoreboard">
              <div class="col-xs-3">
                <div class="scoreboard">
                  <h4>Blue Number</h4>
                  <div class="score blue">455,77</div></div>
              </div>
              <div class="col-xs-3">
                <div class="scoreboard">
                  <h4>A Number</h4>
                  <div class="score">455,77</div></div>
              </div>
              <div class="col-xs-3">
                <div class="scoreboard">
                  <h4 class="">Minimum</h4>
                  <div class="score red">566,03</div></div>
              </div>
              <div class="col-xs-3">
                <div class="scoreboard last">
                  <h4>Maximum</h4>
                  <div class="score green">46543,44</div></div>
              </div>
            </div>
            <h3>More chart examples?</h3>
            <p>HTML5 Admin includes 2 amazing libraries to make any sort of chart.
              <br>They are both
              <strong>extremely easy to understand and use</strong>.</p>
            <div class="btn-group">
              <a class="h5a-btn btn btn-primary" target="_blank" href="http://omnipotent.net/jquery.sparkline/#examples">jQuery Sparklines
                <i class="fa fa-external-link"></i></a>
              <a class="h5a-btn btn btn-primary" target="_blank" href="http://www.flotcharts.org/flot/examples/">Flot Charts
                <i class="fa fa-external-link"></i></a>
            </div>
            <a class="h5a-btn btn btn-success" data-toggle="modal" href="#sampleModal">Demo modal
              <i class="fa fa-expand"></i></a>
            <br>
            <br>
            <hr id="more-widgets">
            <br>
            <br>
          </div>
        </div>
      </div>
    </div>
    <div id="sampleModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none">
      <div class="modal-dialog" style="width: 800px;">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 class="modal-title" id="myModalLabel">物联卡</h3></div>
          <div class="modal-body">
             <table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="demoProducts" aria-describedby="demoProducts_info"><thead><tr role="row"><th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="demoProducts" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Title: activate to sort column descending" style="width: 163px;">卡号</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="demoProducts" rowspan="1" colspan="1" aria-label="Price (EUR): activate to sort column ascending" style="width: 146px;">设备名称</th><th class="sorting" role="columnheader" tabindex="0" aria-controls="demoProducts" rowspan="1" colspan="1" aria-label="Sold: activate to sort column ascending" style="width: 200px;">注册时间</th></tr></thead>
                <tbody role="alert" aria-live="polite" aria-relevant="all">
                 <% @devices.each do |pd|%>
                 <tr class="odd"><td class=" sorting_1"><%=pd.device_sn%></td><td class=" "><%= pd.device_name%></td>
                 <td class=" ">
                                    <% if pd.create_time%>
			            <%=pd.create_time.strftime('%Y-%m-%d') %>
 
                                    <% end %>
                 </td>
                 </tr>
                  <% end %>
                 </tbody></table>
          </div>
          <div class="modal-footer">
            <button type="button" class="h5a-btn btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>
    <div id="chartsModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 class="modal-title" id="myModalLabel">Graph Modal</h3>
            <small>This is the Modal Head with
              <a class="tooltip-test" data-html="true" data-toggle="tooltip" data-placement="right" title="" data-original-title="<h5>Tips</h5><p>This might be a good place for old good <u>HTML</u> <em>tips</em></p>">Some Tips
                <i class="fa fa-info-circle"></i></a>
            </small>
          </div>
          <div class="modal-body">
            <p>Why not showing a modal after a graph click?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="h5a-btn btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="h5a-btn btn btn-primary">Save changes</button></div>
        </div>
      </div>
    </div>
    <script type="text/javascript" async="" src="http://api.filepicker.io/v1/filepicker.js?ver=1.1"></script>
    <script src="/dashboard/jquery.min.js"></script>
    <script src="/dashboard/bootstrap.min.js"></script>
    <script src="/dashboard/jquery.sparkline.min.js"></script>
    <script src="/dashboard/jquery.flot.min.js"></script>
    <script src="/dashboard/jquery.flot.pie.js"></script>
    <script src="/dashboard/jquery.flot.stack.js"></script>
    <script src="/dashboard/jquery.flot.resize.js"></script>
    <script src="/dashboard/jquery.dataTables.min.js"></script>
    <script src="/dashboard/jquery.knob.min.js"></script>
    <script src="/dashboard/jquery.validate.min.js"></script>
    <script type="text/javascript">(function(a) {
        if (window.filepicker) {
          return
        }
        var b = a.createElement("script");
        b.type = "text/javascript";
        b.async = !0;
        b.src = ("https:" === a.location.protocol ? "https:": "http:") + "//api.filepicker.io/v1/filepicker.js?ver=1.1";
        var c = a.getElementsByTagName("script")[0];
        c.parentNode.insertBefore(b, c);
        var d = {};
        d._queue = [];
        var e = "pick,pickMultiple,pickAndStore,read,write,writeUrl,export,convert,store,storeUrl,remove,stat,setKey,constructWidget,makeDropPane".split(",");
        var f = function(a, b) {
          return function() {
            b.push([a, arguments])
          }
        };
        for (var g = 0; g < e.length; g++) {
          d[e[g]] = f(e[g], d._queue)
        }
        window.filepicker = d
      })(document);</script>
    <script src="/dashboard/dashboard.js"></script>
    <iframe name="filepicker_comm_iframe" id="filepicker_comm_iframe" src="https://dialog.filepicker.io/dialog/comm_iframe/" style="display: none;"></iframe>
    <iframe name="fpapi_comm_iframe" id="fpapi_comm_iframe" src="https://www.filepicker.io/dialog/comm_iframe/" style="display: none;"></iframe>
  </body>

</html>
